<template>
	<transition name="slide">
		<div class="add-song" v-show="showFlag" @click.stop>
			<div class="header">
				<h1 class="title">添加歌曲到列表</h1>
				<div class="close" @click="hide">
					<i class="icon-close"></i>
				</div>
			</div>
			<div class="search-box-wrapper">
				<search-box
					ref="searchBox"
					placeholder="搜索歌曲"
					@query="onQueryChange"
				></search-box>
			</div>
			<div class="shortcut" v-show="!query">
				<switches
					:currentIndex="currentIndex"
					:switches="switches"
					@switch="switchItem"
				></switches>
				<div class="list-wrapper">
					<scroll
						ref="songList"
						v-if="currentIndex === 0"
						:data="playHistory"
						:refreshDelay="refreshDelay"
						class="list-scroll"
					>
						<div class="list-inner">
							<song-list :songs="playHistory" @select="selectSong"></song-list>
						</div>
					</scroll>
					<scroll
						ref="searchList"
						v-if="currentIndex === 1"
						:data="searchHistory"
						:refreshDelay="refreshDelay"
						class="list-scroll"
					>
						<div class="list-inner">
							<search-list
								:searches="searchHistory"
								@select="addQuery"
								@delete="deleteSearchHistory"
							></search-list>
						</div>
					</scroll>
				</div>
			</div>
			<div class="search-result" v-show="query">
				<suggest
					:query="query"
					:showSinger="showSinger"
					@listScroll="blurInput"
					@select="selectSuggest"
				></suggest>
			</div>
			<top-tip ref="topTip">
				<div class="tip-title">
					<i class="icon-ok"></i>
					<span class="text">已添加到播放列表</span>
				</div>
			</top-tip>
		</div>
	</transition>
</template>

<script>
	import SearchBox from '@/base/search-box/search-box';
	import Suggest from '@/components/suggest/suggest';
	import SongList from '@/base/song-list/song-list';
	import SearchList from '@/base/search-list/search-list';
	import Switches from '@/base/switches/switches';
	import Scroll from '@/base/scroll/scroll';
	import TopTip from '@/base/top-tip/top-tip';
	import { searchMixin } from '@/common/js/mixin';
	import { processSongs } from '@/service/song';
	import { mapActions, mapGetters, mapMutations } from 'vuex';

	export default {
		name: 'AddSong',
		mixins: [searchMixin],
		data() {
			return {
				showFlag: false,
				showSinger: false,
				currentIndex: 0,
				switches: [{name: '最近播放'}, {name: '搜索历史'}]
			}
		},
		computed: {
			...mapGetters(['playHistory', 'searchHistory'])
		},
		methods: {
			show() {
				this.showFlag = true;
				setTimeout(() => {
					if (this.currentIndex) {
						this.$refs.searchList.refresh();
					} else {
						this.$refs.songList.refresh();
					}
				}, 20);
			},
			hide() {
				this.showFlag = false;
			},
			selectSuggest() {
				this.saveSearch();
				this.showTip();
			},
			switchItem(index) {
				this.currentIndex = index;
			},
			selectSong(song, index) {
				if (index !== 0) {
					processSongs([song]).then(res => {
						song.pic = res && res[0].pic;
						this.insertSong(song);
						this.setCurrentSong(song);
					});
				}
				this.showTip();
			},
			showTip() {
				this.$refs.topTip.show();
			},
			...mapMutations({
				setCurrentSong: 'SET_CURRENT_SONG'
			}),
			...mapActions(['insertSong'])
		},
		components: {
			SearchBox,
			Suggest,
			SongList,
			Switches,
			Scroll,
			SearchList,
			TopTip
		}
	}
</script>

<style lang="stylus" scoped>
	@import "../../common/stylus/variable"
	@import "../../common/stylus/mixin"
	
	.add-song
		position: fixed
		top: 0
		bottom: 0
		width: 100%
		z-index: 200
		background: $color-background
		&.slide-enter-active, &.slide-leave-active
			transition: all 0.3s
		&.slide-enter, &.slide-leave-to
			transform: translate3d(100%, 0, 0)
		.header
			position: relative
			height: 44px
			text-align: center
			.title
				line-height: 44px
				font-size: $font-size-large
				color: $color-text
			.close
				position: absolute
				top: 0
				right: 8px
				.icon-close
					display: block
					padding: 12px
					font-size: 20px
					color: $color-theme
		.search-box-wrapper
			margin: 20px
		.shortcut
			.list-wrapper
				position: absolute
				top: 165px
				bottom: 0
				width: 100%
			.list-scroll
				height: 100%
				overflow: hidden
				.list-inner
					padding: 20px 30px
		.search-result
			position: fixed
			top: 124px
			bottom: 0
			width: 100%
		.tip-title
			text-align: center
			padding: 18px 0
			font-size: 0
			.icon-ok
				font-size: $font-size-medium
				color: $color-theme
				margin-right: 4px
			.text
				font-size: $font-size-medium
				color: $color-text
</style>